<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../css/common.css" />
	</head>
	<body>
		
		城市：
		<select id="city">
			<option>深圳</option>
			<option>长沙</option>
			<!--<option>兰州</option>-->
		</select>
		
		<br/>
		
		<br>
		<input type="text" id="addValue" placeholder="请输入要增加的城市..." />
		<!--验证是否重复-->
		<input type="button" id='addButton'  value="增加" />
		<br/>
		<br/>
		
		<input type="text" placeholder="请输入要删除的城市..."  />
		<!-- 判断被删除的元素是否在里面-->
		<input type="button" value="删除"  />
		<br/>
		<br/>
		
		<input type="text" placeholder="请输入修改前的城市..." />
		<!--修改之前必须存在长沙  修改之后的值不能与非长沙的地名重名-->
		<input type="button" value="修改"  />
		<input type="text" placeholder="请输入修改后的城市..." />
		<br/>
		<br/>
		
		<input type="text" placeholder="请输入要查询的城市..."  />
		<!-- 有 alert 存在  长沙存在   长沙的下标 -->
		<!-- 无 alert 长沙不存在  -->
		<input type="button" value="查询"  />
		<br/>
		
		
		<script>
			
			window.onload=function(){
				
				//增加的功能
				//1 先得到增加这个按钮addButton 并给这个按钮绑定1个事件onclick
				
				document.getElementById('addButton').onclick=function(){
					//2 获得文本框 addValue 的值
					var addValue = document.getElementById('addValue').value;
					
					//2.1.1 遍历select里面的option的innerText  看是否有重复
					var options = document.getElementsByTagName('option');
					var b = chongfu(addValue,options);
					console.log(b);
					if(b){
						alert("您输入的城市[ "+addValue+" ]已经存在...");
					}else{
						//3 生成option标签 xyz  把 addValue的值放到 option  innerText
						var option= document.createElement('option');
						option.innerText=addValue;
						
						var city = document.getElementById('city');
						//city.remove(option);
						city.appendChild(option);
						alert("您输入的城市[ "+addValue+" ]增加成功...");
						//4 把标签 xyz放到select里面去city
					}
					
				}
				
				
				function chongfu(value,array){
					var flag= false;
					
					for(var index =0; index<array.length; index++){
						var option = array[index];
						var v =option.innerText;
						if(value == v){
							flag = true;
							break;
						}
						
					}
					return flag;
				}
				
			}
		</script>
		
	</body>
</html>
